<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="客户业绩详情">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <link rel="stylesheet" href="/apps/css/mui.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <header class="d-flex align-items-center bg-custom-color p-3">
        <button id="backButton" class="btn btn-primary rounded-circle me-3" style="background-color: white;" onclick="history.back();">
            <i class="fas fa-arrow-left custom-color"></i>
        </button>
        <span class="title-text text-white fs-5">
            {{title}}
        </span>
    </header>

    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">客户基本信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <h6 class="text-muted">客户姓名</h6>
                                        <h5 class="text-primary">{{client.displayName}}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <h6 class="text-muted">代表代码</h6>
                                        <h5 class="text-info">{{client.rep_code}}</h5>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <h6 class="text-muted">机构</h6>
                                        <h6 class="text-secondary">{{client.agencyDisplay}}</h6>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <h6 class="text-muted">部门</h6>
                                        <h6 class="text-secondary">{{client.department}}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{#if monthlyDetails}}
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">月度业绩详情</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container mb-4" style="position: relative; height:50vh; width:100%;">
                                <canvas id="detailChart"></canvas>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>月份</th>
                                            <th>推荐患者数</th>
                                            <th>首患数量</th>
                                            <th>销售额</th>
                                            <th>活跃天数</th>
                                            <th>日均首患</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each monthlyDetails}}
                                        <tr>
                                            <td class="fw-bold">{{this.month}}</td>
                                            <td class="text-primary">{{this.recruited_count}}</td>
                                            <td class="text-success fw-bold">{{this.first_order_count}}</td>
                                            <td class="text-warning">{{formatNumber this.actual_weixin_paid 0}}</td>
                                            <td class="text-info">{{this.active_days}}</td>
                                            <td class="text-secondary">
                                                {{#if this.active_days}}
                                                    {{formatNumber (divide this.first_order_count this.active_days) 2}}
                                                {{else}}
                                                    0.00
                                                {{/if}}
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {{else}}
                    <div class="card mb-4">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">暂无业绩数据</h5>
                            <p class="text-muted">在指定时间段内没有找到该医生的业绩数据</p>
                        </div>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>

        <nav aria-label="Page navigation" class="pagination-container">
            <button id="homeButton" class="btn btn-primary position-absolute top-0 start-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="window.location.href='https://totemlife.cn/apps/crm/';">
                <i class="fas fa-home" style="color:white;"></i>
            </button>
            <button id="backButton" class="btn btn-primary position-absolute top-0 end-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="window.location.href='/apps/doctor-performance/chart?begin={{begin}}&end={{end}}';">
                <i class="fas fa-chart-line" style="color: white;"></i>
            </button>
        </nav>
    </div>

    <footer class="footer" style="text-align: center;">
        <div class="row">
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">&copy;2023 图腾生命医学</div>
            <div class="text-muted">我们为人类免疫事业而奉献</div>
        </div>
    </footer>

    {{#if monthlyDetails}}
    <script>
        // 图表数据
        const monthlyData = {{{json monthlyDetails}}};

        // 提取数据
        const months = monthlyData.map(item => item.month);
        const recruitedData = monthlyData.map(item => parseInt(item.recruited_count) || 0);
        const firstOrderData = monthlyData.map(item => parseInt(item.first_order_count) || 0);
        const salesData = monthlyData.map(item => parseInt(item.actual_weixin_paid) || 0);

        // 创建图表
        const ctx = document.getElementById('detailChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: months,
                datasets: [
                    {
                        label: '推荐患者数',
                        data: recruitedData,
                        borderColor: '#36A2EB',
                        backgroundColor: '#36A2EB20',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        yAxisID: 'y'
                    },
                    {
                        label: '首患数量',
                        data: firstOrderData,
                        borderColor: '#FF6384',
                        backgroundColor: '#FF638420',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        yAxisID: 'y'
                    },
                    {
                        label: '销售额',
                        data: salesData,
                        borderColor: '#FFCE56',
                        backgroundColor: '#FFCE5620',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: '{{doctor.displayName}} - 月度业绩趋势',
                        font: {
                            size: 16
                        }
                    },
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: '月份'
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: '数量'
                        },
                        beginAtZero: true
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: '销售额'
                        },
                        beginAtZero: true,
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    </script>
    {{/if}}

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script src="/apps/js/wx-client-dom.js"></script>
</body>
</html>